<template>
  <div class="bottomRowContainer">
    <div
      class="bottomRowBg"
      :class="{ outline: this.showDisable }"
      :style="getBgStyle"
    ></div>
    <div class="buttonRow"><slot></slot></div>
  </div>
</template>
<script>
export default {
  props: {
    showDisablePro: {
      type: Boolean,
      defautl: false,
    },
    borderRadiusTypePro: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      showDisable: false, //整个卡片是否不可用
      borderRadiusType: 3, //导角类型：0-无导角 1-上方导角 2-下方导角 3-四边导角
    };
  },
  mounted() {
    this.showDisable = this.showDisablePro;
    this.borderRadiusType = this.borderRadiusTypePro;
  },
  watch: {
    showDisablePro(newVal) {
      this.showDisable = newVal;
      console.log("ButtonRow: this.showDisable = ", this.showDisable);
    },
    borderRadiusTypePro(newVal) {
      this.borderRadiusType = newVal;
    },
  },
  computed: {
    getBgStyle() {
      switch (this.borderRadiusType) {
        case 0:
          return {};
        case 1:
          return {
            borderTopLeftRadius: 16 + "px",
            borderTopRightRadius: 16 + "px",
          };
        case 2:
          return {
            borderBottomLeftRadius: 16 + "px",
            borderBottomRightRadius: 16 + "px",
          };
        case 3:
          return {
            borderTopLeftRadius: 16 + "px",
            borderTopRightRadius: 16 + "px",
            borderBottomLeftRadius: 16 + "px",
            borderBottomRightRadius: 16 + "px",
          };
        default:
          return {
            borderTopLeftRadius: 16 + "px",
            borderTopRightRadius: 16 + "px",
            borderBottomLeftRadius: 16 + "px",
            borderBottomRightRadius: 16 + "px",
          };
      }
    },
  },
};
</script>
<style scoped>
.bottomRowContainer {
  position: relative;
  width: 100%;
  height: 88px;
}

.bottomRowBg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 88px;
  background: var(--current-card-background-color);
  /* background: #00ff00; */
}

.buttonRow {
  position: absolute;
  z-index: 4;
  height: 72px;
  top: 16px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  /* background: rgba(255, 255, 0, 0.5); */
}
</style>
